<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <h1>这是一个测试跨域的页面, 请按下 F12 查看控制台日志</h1>
  </body>
  <script>
    // const xhr = new XMLHttpRequest();

    // // html 所处环境3000 端口  服务域名是 3001端口 因此这里会导致跨域
    // // 想一个方法来解决跨域问题
    // const host = "http://localhost:3001";

    // xhr.open("GET", `${host}/api/name`, true);
    // xhr.send();
    // console.log("发起请求");
    // // 请求成功回调函数
    // xhr.onload = (e) => {
    //   console.log("请求成功");
    // };

    // // 请求结束
    // xhr.onloadend = (e) => {
    //   console.log("请求结束");
    // };
    // // 请求出错
    // xhr.onerror = (e) => {
    //   console.log("请求出错, 错误原因如下:", e);
    // };
  </script>
  <script>
    function getName(data) {
      console.log('这是通过jsonP拿到的数据',data);
    }
  </script>
  <script>
    // 构造 jsonp
    const host = "http://localhost:3001";
    const el = document.createElement('script')
    el.src = `${host}/api/username`
    document.body.appendChild(el)
  </script>
</html>
